<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
 <title>test dojo ajax</title>
  <script type="text/javascript" src="dojotoolkit/dojo/dojo.js" djConfig="parseOnLoad:true, isDebug:true"></script>
  <script type="text/javascript">
    var formSubmit = function(e){
          e.preventDefault();
          dojo.xhrPost({
            url: "alternate-submit.php",
            form: "mainForm",
            handleAs: "text",
            handle: function(data,args){
              if(typeof data == "error"){
                 console.warn("error!",args);
              }else{
                 console.log(data);
              }
            }
          });
     };
     var postData = function(){
        dojo.xhrPost({
            url: "simple-object.json",
            handleAs: "json",
            handle: function(data,ioargs){
              dojo.byId("testHeading").innerHTML += "by: "+data.name;
              if(data.aFunction && data.aFunction() ){}
            }
        }); 
     };
     
     var init = function(){
        var contentNode = dojo.byId("content");
        dojo.xhrGet({
          url: "sample.txt",
          handleAs: "text",
          handle: function(data,args){
             if(typeof data == "error"){
                console.warn("error!",error);
                console.log(args);
             }else{
                dojo.fadeOut({
                   node: contentNode,
                   onEnd: function(){
                     contentNode.innerHTML = data;
                     dojo.fadeIn({node: contentNode}).play();
                   } }).play();
             }}
        });
        var theForm = dojo.byId("mainForm");
        dojo.connect(theForm,"onsubmit","formSubmit");
     };
    
     dojo.addOnLoad(init);
     dojo.addOnLoad(postData);
  </script>
  <style type="text/css">
    #container {
        border:1px dotted #b7b7b7;
        background:#ededed;
        width:100px;
        height:25px;
    }
  </style>
</head>

<body> <!-- this is a Typical webpage starting point -->
<h1 id="testHeading">replaceme</h1>
<div id="container" class="box">
   <div id="content">
    I am some Inner Content.
    I amd going to be replaced
   </div
</div>
<form id="mainForm" action="ajax-submit.php" method="post">
   <label for="firstName">Name: </label>
   <input type="text" name="firstName" value="Enter Name" />
</form>

</body>
</html>
